<template>
    <div style="height: 50px;">
        <el-button type="primary" @click="AddManpower(ruleFormRef)">
            保存
        </el-button>
    </div>

    <el-form ref="ruleFormRef" :rules="rules" :model="form" class="demo-ruleForm" :size="formSize" status-icon
        label-width="auto" style="max-width: 600px">
        <el-form-item label="档案编号" prop="mNumber">
            <el-input v-model="form.mNumber" placeholder="保存后自动生成" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="mName">
            <el-input v-model="form.mName" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="性别" prop="mSex">
            <el-radio-group v-model="form.mSex">
                <el-radio :value="true">男</el-radio>
                <el-radio :value="false">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" style="width: 300px;" prop="mBirthDay">
            <el-date-picker v-model="form.mBirthDay" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
                style="width: 100%" />
        </el-form-item>
        <el-form-item label="身份证号码" prop="mIdCard">
            <el-input v-model="form.mIdCard" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="联系电话" prop="mPhone">
            <el-input v-model="form.mPhone" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="mEmail">
            <el-input v-model="form.mEmail" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="微信号" prop="mWeChat">
            <el-input v-model="form.mWeChat" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="QQ号" prop="mqq">
            <el-input v-model="form.mqq" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="紧急联系人" prop="mContact">
            <el-input v-model="form.mContact" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="紧急联系人电话" prop="mcPhone">
            <el-input v-model="form.mcPhone" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="户口地址" prop="mPermanent">
            <el-input v-model="form.mPermanent" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="家庭住址" prop="mResidence">
            <el-input v-model="form.mResidence" />
        </el-form-item>
        <el-form-item label="入职时间" style="width: 300px;" prop="mEntryDate">
            <el-date-picker v-model="form.mEntryDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
                style="width: 100%" />
        </el-form-item>
        <el-form-item label="所在部门" prop="sectorId">
            <el-select v-model="form.sectorId" placeholder="请选择部门" style="width: 200px;">
                <el-option v-for="item in sectorlist" :key="item.value" :label="item.label" :value="item.value"
                    @click="GetPostList()" />
            </el-select>
        </el-form-item>
        <el-form-item label="所在岗位" prop="postId">
            <el-select v-model="form.postId" placeholder="请选择岗位" style="width: 200px;">
                <el-option v-for="item in postlist" :key="item.postId" :label="item.postName" :value="item.postId" />
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../http.js'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

//随机数
const generateRandomNumber = () => {
    const a = Math.floor(100000 + Math.random() * 900000); // 生成一个 6 位的随机数
    sessionStorage.setItem('Random', JSON.stringify(a));
}

//验证
const rules = reactive<FormRules>({
    mName: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' },
    ],
    mIdCard: [
        { required: true, message: '请输入身份证号码', trigger: 'blur' },
    ],
    mPhone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
    ],
    mEmail: [
        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    ],
    mWeChat: [
        { required: true, message: '请输入微信号', trigger: 'blur' },
    ],
    mqq: [
        { required: true, message: '请输入QQ号', trigger: 'blur' },
    ],
    mContact: [
        { required: true, message: '请输入紧急联系人', trigger: 'blur' },
    ],
    mcPhone: [
        { required: true, message: '请输入紧急联系人电话', trigger: 'blur' },
    ],
    mPermanent: [
        { required: true, message: '请输入户口地址', trigger: 'blur' },
    ],
    mResidence: [
        { required: true, message: '请输入家庭住址', trigger: 'blur' },
    ],
    mBirthDay: [
        {
            type: 'date',
            required: true,
            message: '请输入出生日期',
            trigger: 'change',
        },
    ],
    mEntryDate: [
        {
            type: 'date',
            required: true,
            message: '请输入入职时间',
            trigger: 'change',
        },
    ],
    sectorId: [
        {
            required: true,
            message: '请选择所在部门',
            trigger: 'change',
        },
    ],
    postId: [
        {
            required: true,
            message: '请选择所在岗位',
            trigger: 'change',
        },
    ],
})

//添加
const form = reactive({
    "postId": "",
    "sectorId": "",
    "mNumber": "",
    "mName": "",
    "mSex": true,
    "mBirthDay": "",
    "mIdCard": "",
    "mPhone": "",
    "mEmail": "",
    "mWeChat": "",
    "mqq": "",
    "mContact": "",
    "mcPhone": "",
    "mPermanent": "",
    "mResidence": "",
    "mIdPhoto": "",
    "mEntryDate": "",
})

onMounted(() => {
    generateRandomNumber();
    GetSectorList();
})

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
        })
}

//岗位
const postlist = ref([])
const GetPostList = () => {
    form.postId = "";
    axios.get(http.zblnb + '/vendor/api/Post/GetPostList?SectorId=' + (form.sectorId || 0))
        .then(res => {
            postlist.value = res.data.data;
        })
}

//添加人员档案
const AddManpower = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            form.mNumber = sessionStorage.getItem('Random');
            console.log(form)
            axios.post(http.zblnb + '/vendor/api/Manpower/AddManpower', form)
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success('添加成功');
                        router.push('/ListManpower')
                    }
                    else {
                        ElMessage.error('添加失败');
                    }
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}



</script>

<style></style>